<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core" 
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                xmlns:p="http://primefaces.org/ui"
                template="/template/plantilla.xhtml">
    <ui:define name="title"><h:outputText value="Sinetcom - SLAs y Disponibilidad"></h:outputText></ui:define>
    <ui:define name="menu"><ui:include src="/menu/menu.xhtml" /></ui:define>
    <ui:define name="content">
        <f:view contentType="text/html">
            <h:head />
            <h:body>
                <h:form id="form">
<!--                    <p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
                        <p:graphicImage library="images" name="ajax_loader.gif" />
                    </p:dialog>-->
                    <p:panelGrid columns="2">
                        
                        <p:panelGrid id="ingresoSLA" columns="3">
                            <f:facet name="header">
                                <h:outputText value="Ingreso de SLAs"></h:outputText>
                            </f:facet>
                            <p:outputLabel value="Nombre: " for="nombreF" />
                            <p:inputText id="nombreF" value="#{fabricantesYCategorias.nuevoFabricante.nombre}" title="Nombre" required="true" />
                            <p:message for="nombreF"></p:message>
                            <p:outputLabel value="Descripción: " for="descripcionF" />
                            <p:inputTextarea id="descripcionF" rows="10" cols="20" value="#{fabricantesYCategorias.nuevoFabricante.descripcion}" title="Descripcion" />
                            <p:message for="descripcionF"></p:message>
                            <f:facet name="footer">
                                <p:commandButton value="Ingresar Fabricante" actionListener="#{fabricantesYCategorias.crearFabricante}" update="@form" process=":form:ingresoFabricante" onstart="statusDialog.show()" onsuccess="statusDialog.hide()"></p:commandButton>
                            </f:facet>
                        </p:panelGrid>
                        <p:panelGrid id="ingresoCategoria" columns="3">
                            <f:facet name="header">
                                <h:outputText value="Ingreso de Categorías"></h:outputText>
                            </f:facet>
                            <p:outputLabel value="Nombre: " for="nombreC" />
                            <p:inputText id="nombreC" value="#{fabricantesYCategorias.nuevaCategoriaProducto.nombre}" title="Nombre" required="true" />
                            <p:message for="nombreC"></p:message>
                            <p:outputLabel value="Descripción: " for="descripcionC" />
                            <p:inputTextarea id="descripcionC" rows="10" cols="20" value="#{fabricantesYCategorias.nuevaCategoriaProducto.descripcion}" title="Descripcion" />
                            <p:message for="descripcionC"></p:message>
                            <f:facet name="footer">
                                <p:commandButton value="Ingresar Categoría" actionListener="#{fabricantesYCategorias.crearCategoria}" update="@form" process=":form:ingresoCategoria" onstart="statusDialog.show()" onsuccess="statusDialog.hide()"></p:commandButton>
                            </f:facet>
                        </p:panelGrid>
                    </p:panelGrid>
                    <p:panel id="fabricantesCategorias">
                        <f:facet name="header">
                            <h:outputText value="Fabricantes - Categorias"></h:outputText>
                        </f:facet>
                        <p:dataTable value="#{fabricantesYCategorias.fabricantes}" var="fabricante" selection="#{fabricantesYCategorias.fabricanteSeleccionado}" selectionMode="single" rowKey="#{fabricante.id}" rows="10" rowsPerPageTemplate="5,10,15" >
                            <p:ajax event="rowSelect" listener="#{fabricantesYCategorias.registroSeleccionado}" onstart="statusDialog.show()" onsuccess="statusDialog.hide()" update=":form:fabricantesCategorias, :form:categorias"></p:ajax>
                            <p:ajax event="rowUnselect" onstart="statusDialog.show()" onsuccess="statusDialog.hide()" update=":form:fabricantesCategorias, :form:categorias"></p:ajax>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Id"/>
                                </f:facet>
                                <h:outputText value="#{fabricante.id}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Nombre"/>
                                </f:facet>
                                <h:outputText value="#{fabricante.nombre}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Descripción"/>
                                </f:facet>
                                <h:outputText value="#{fabricante.descripcion}"/>
                            </p:column>
                        </p:dataTable>
                        <f:facet name="footer">
                            <p:commandButton value="Categorías de Fabricante" disabled="#{empty fabricantesYCategorias.fabricanteSeleccionado.id}" onclick="categorias.show()" immediate="true"></p:commandButton>
                        </f:facet>
                    </p:panel>
                    <p:dialog id="categorias" modal="true" widgetVar="categorias">
                        <p:panelGrid columns="2">
                            <f:facet name="header">
                                <h:outputText value="Selección de Categorías"></h:outputText>
                            </f:facet>
                            <p:outputLabel value="Seleccione las categorías activas: "></p:outputLabel>
                            <p:pickList id="categoriasS" value="#{fabricantesYCategorias.categoriasSeleccionadas}" var="categoria" showTargetControls="false" itemValue="#{categoria.id.toString()}" itemLabel="#{categoria.nombre}" converter="#{categoriaConverter}">
                                <f:facet name="sourceCaption">Disponibles</f:facet>
                                <f:facet name="targetCaption">Asignados</f:facet>
                                <p:ajax event="transfer" listener="#{fabricantesYCategorias.transferirCategoria}" />
                                <p:column>
                                    <h:outputText value="#{categoria.nombre}"></h:outputText>
                                </p:column>
                            </p:pickList>
                            <f:facet name="footer">
                                <p:commandButton value="Actualizar" actionListener="#{fabricantesYCategorias.actualizarCategoriasDeFabricante}" process="@this" update="@form" onstart="statusDialog.show()" onsuccess="statusDialog.hide()">
                                    <p:confirm header="Confirmación" message="¿Está seguro que desea actualizar este fabricante?" icon="ui-icon-alert"></p:confirm>
                                </p:commandButton>
                            </f:facet>
                        </p:panelGrid>
                    </p:dialog>
                    <p:confirmDialog global="true">
                        <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
                        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
                    </p:confirmDialog>
                </h:form>
            </h:body>
        </f:view>
    </ui:define>
</ui:composition>
